// components/HighlightText.tsx
import React from 'react';
import { Text, RichText } from '@tarojs/components';

interface HighlightTextProps {
  /** 文本内容，可能为 null/undefined 或包含 <font> 标签 */
  text?: string | null;
  /** 可选：未包含 <font> 标签时用于前端高亮的关键字 */
  keyword?: string | null;
  /** 可选：前端高亮样式（仅 keyword 生效时） */
  highlightStyle?: React.CSSProperties;
  /** 可选：当后台 <font> 渲染时的颜色（默认红色） */
  fontColor?: string; // e.g. '#ff0000'
}

const safeStr = (v: any) => (v == null ? '' : String(v));

const HighlightText: React.FC<HighlightTextProps> = ({
  text,
  keyword,
  highlightStyle = { color: 'red', fontWeight: 'bold' },
  fontColor = '#ff0000',
}) => {
  const t = safeStr(text);
  const k = safeStr(keyword);

  // —— 模式 A：后台已给 <font>，直接渲染为 RichText（用 span 替换 font）——
  if (/<\s*font[\s>]/i.test(t)) {
    // 注意：RichText 支持 string，避免手写 nodes 结构更稳（不触发 null.length）
    const html = t
      .replace(
        /<\s*font\s*>/gi,
        `<span style="color:${fontColor};display:inline;">`
      )
      .replace(/<\s*\/\s*font\s*>/gi, '</span>');
    return <RichText nodes={html} />;
  }

  // —— 模式 B：前端本地高亮（当 keyword 存在且非空时）——
  if (k.trim()) {
    // 转义正则特殊字符
    const escaped = k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const regex = new RegExp(escaped, 'gi');

    // 用 match + split 安全拆分
    const parts = t.split(regex);
    const matches = t.match(regex) || [];

    return (
      <Text>
        {parts.map((part, idx) => (
          <React.Fragment key={idx}>
            {part}
            {idx < matches.length && (
              <Text style={highlightStyle}>{matches[idx]}</Text>
            )}
          </React.Fragment>
        ))}
      </Text>
    );
  }

  // —— 模式 C：普通文本 ——
  return <Text>{t}</Text>;
};

export default HighlightText;
